$(function () {
    // 第一步 一进来就显示左边一级分类的数据
    $.ajax({
        url: '/category/queryTopCategory',
        type: 'get',
        success: function (res) {//rows 是ajax的返回结果为一个对象
            for (var i = 0; i < res.rows.length; i++) {
                var item = res.rows[i];//遍历这个对象
                // console.log(item);
                //自定义属性  动态绑定ID
                var a = $(`<a href="#" data-id='${item.id}'>${item.categoryName}</a>`);//自定义一个值 动态追加到页面
                $('.leftfirst').append(a)
            }
                var firsrtItem = res.rows[0];
                $('.leftfirst').find('a:first-child').addClass('active').sibling //给第一个a标签加一个类  已进入页面第一个A标签高亮
                var ids= $('.leftfirst').find('a:first-child').attr('data-id') //得到第一个A标签的值
                console.log(ids);
                $.ajax({
                    url: '/category/querySecondCategory',
                    type: 'get',
                    data: {
                        id: ids,//此时IDS为第一个A标签的ID  所以一进入页面显示想对应的内容
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.rows.length > 0) {
                            for (var i = 0; i < res.rows.length; i++) {
                                var item = res.rows[i];
                                // console.log(item);
                                //自定义属性  动态绑定ID
                                var a = $(
                                    `<li>
                                      <a href="#">
                                        <img src="${item.brandLogo}" alt="">
                                        <span>${item.brandName}</span>
                                      </a>
                                    </li>
                                    `);
                                $('.ul-box').append(a)
                            }
                        } else {
                            $('.ul-box').html('暂无数据')
                        }
        
        
                    },
                    beforeSend: function () {
                        $('.ul-box').html('')
                    }
                })
                
            
        },
        error: function (err) {
            console.log(err);

        }
    })
    $('.leftfirst').on('tap', 'a', function () {//给每个A标签绑定点击事件
        $(this).addClass('active').siblings().removeClass('active');//点击高亮
        var ids = $(this).attr('data-id');//得到当前A标签的ID值
        $.ajax({
            url: '/category/querySecondCategory',
            type: 'get',
            data: {
                id: ids,
            },
            success: function (res) {
                console.log(res);
                if (res.rows.length > 0) {
                    for (var i = 0; i < res.rows.length; i++) {//将每次点击A标签的ID值发送ajax 
                        var item = res.rows[i];
                        // console.log(item);
                        //自定义属性  动态绑定ID
                        var a = $(
                            `<li>
                              <a href="#">
                                <img src="${item.brandLogo}" alt="">
                                <span>${item.brandName}</span>
                              </a>
                            </li>
                            `);
                        $('.ul-box').append(a)//将每次点击得到的A标签的ID相对应的结果渲染到页面
                    }
                } else {
                    $('.ul-box').html('暂无数据')
                }


            },
            beforeSend: function () {
                $('.ul-box').html('')//在点击之前时将之前渲染到页面的东西清空
            }
        })
    })
})